<!--
 * @Author: DeluxePig
 * @LastEditors: DeluxePig 250293786@qq.com
 * @Date: 2024-06-16 13:52:40
 * @LastEditTime: 2024-06-27 22:28:48
 * @Description: 模板选择
-->
<template>
  <div class="muban-container">
    <div class="page-left">
      <div class="form-head-box">名片模版选择</div>
      <div class="form-body-box">
        <div v-for="(item, index) in cardList.slice().reverse()" :key="item.id" class="card-list-box"
          :class="{ active: item.id == mayCard.template_id }" @click="chooseMubanCard(item)">
          <div class="card-div">
            <div class="img-bg" :class="'img-bg' + index"></div>
            <span class="iconfont icon-gougoutubiao"></span>
          </div>
          <div class="card-title">
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="up-box">
        <div class="up-div bg-img">
          <div class="up-title">上传背景图</div>
          <div class="up-cont">
            <UpImage :url="mayCard.addition_data.cardbackImg ? mayCard.addition_data.cardbackImg : ''"
              :up-icon="'iconfont icon-shangchuan'" :up-text="'点击上传文件或将其拖拽到此区域'" @getImg="getImg" />
            <div class="del-btn" @click="mayCard.addition_data.cardbackImg = ''">
              删除
            </div>
          </div>
        </div>
        <div class="up-div card">
          <div class="up-title">电子名片</div>
          <div class="up-cont">
            <UpImage :url="mayCard.addition_data.businessCard" :up-icon="'iconfont icon-shangchuan'"
              :up-text="'点击上传文件或将其拖拽到此区域'" @getImg="getImg2" />
            <div class="del-btn" @click="mayCard.addition_data.businessCard = ''">
              删除
            </div>
          </div>
        </div>
      </div>
      <div class="btn-box">
        <el-button>取消</el-button>
        <el-button type="primary" @click="saveSure()">
          确认
        </el-button>
      </div>
    </div>
    <div class="page-right">
      <div class="form-head-box">小程序效果预览</div>
      <div class="preview-box">
        <div class="head-box">
          <div class="title">{{ userData.real_name }}医生云诊室</div>
        </div>
        <div class="preview-body">
          <div class="attention">
            <span class="iconfont icon-a-tianjiaguanzhuguanzhu"></span>
            关注
          </div>
          <card-shell :business-card="mayCard.addition_data.businessCard"
            :card-back-img="mayCard.addition_data.cardbackImg ? mayCard.addition_data.cardbackImg : ''"
            :template-id="mayCard.template_id" :user-info="userData" />
          <div class="intro-box">
            <div class="intro-icon"></div>
            <div class="intro">{{ userData.intro }}</div>
          </div>
          <div class="address">
            <div><span class="iconfont icon-dingwei"></span></div>
            <div class="text">锦江院区位于成都市成龙大道一段1416号附2号</div>
            <div class="go-here">
              <span class="iconfont icon-fenxiang1"></span>
              <div>去这里</div>
            </div>
          </div>
        </div>
        <div class="foot-box"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { cardConfigApi, modelBaseApi, saveCardApi } from '@/api/card'
import { getInfo } from '@/api/user'
import UpImage from '@/components/upload/up-image.vue'
import CardShell from '../components/businessCard/CardShell.vue'
// import mubanCard from '../components/muban-card'
export default {
  components: {
    // mubanCard
    UpImage,
    CardShell
  },
  data() {
    return {
      cardList: [
        //  {
        //   "id": 4,
        //   "title": "模板4",
        //   "resource_path": "",
        //   "addition_data": "",
        //   "create_datetime": "2024-06-18 21:32:12",
        //   "update_datetime": "2024-06-18 21:32:21",
        //   "visible_switch": 1
        // }
      ],
      mayCard: {
        users_uniqueid: 'n6mbo00lqb0d0djwg4dx5bnuc3npmgqr',
        enable_status: 1, // 分享可查看状态: 0=关闭,1=开启
        template_id: '1', // 模板id
        template_info: {
          id: 6,
          title: '',
          resource_path: '',
          addition_data: '',
          create_datetime: '2024-05-30 10:22:54',
          update_datetime: '2024-05-31 11:05:02',
          visible_switch: 1
        },
        addition_data: {
          // 额外数据 json-object
          cardbackImg: '', // 背景图
          businessCard: '' // 电子名片
        },
        create_datetime: '2024-04-08 19:02:35',
        update_datetime: '2024-04-08 19:12:46'
      },
      userData: {
        id: 1,
        users_uniqueid: '',
        real_name: '', // 姓名
        icon: '', // 头像
        unit_name: '', // 单位名称
        unit_logo: '', // 单位logo
        unit_department: '', // 部门
        unit_title: '', // 职位
        unit_job: '', // 任职
        intro: '', // 简介
        create_datetime: '2024-04-07 13:49:04',
        update_datetime: '2024-04-07 13:49:04',
        phone_visible_switch: 0, // 手机号可见性:0=隐藏,1=可见
        unit_level: '', // 单位级别
        real_photo: '' // 真人照片
      }
    }
  },
  created() {
    this.gertUserData()
    this.getModelBase()
    this.getMyCard()
  },
  methods: {
    gertUserData() {
      getInfo().then((res) => {
        this.userData = res.data
      })
    },
    getMyCard() {
      cardConfigApi().then((res) => {
        if (res.data) {
          this.mayCard = res.data
        }
      })
    },
    getModelBase() {
      modelBaseApi().then((res) => {
        if (res.data && res.data.length > 0) {
          this.cardList = res.data
        }
      })
    },
    chooseMubanCard(item) {
      this.mayCard.template_id = item.id
    },
    getImg(url) {
      this.mayCard.addition_data.cardbackImg = url
    },
    getImg2(url) {
      this.mayCard.addition_data.businessCard = url
    },
    saveSure() {
      this.$confirm('是否确认保存?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.saveCardFun()
        })
        .catch(() => {
          //
        })
    },
    saveCardFun() {
      const data = {
        template_id: this.mayCard.template_id,
        addition_data: this.mayCard.addition_data
      }
      saveCardApi(data)
        .then(() => {
          this.$message({
            message: '保存成功！',
            type: 'success'
          })
        })
        .catch(() => {
          this.$message({
            message: '保存失败，请重试！',
            type: 'warning'
          })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.muban-container {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 30px 96px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;

  .page-left {
    width: calc(100% - 300px);
    height: 100%;
  }

  .page-right {
    width: 300px;
    height: 100%;

    .preview-box {
      width: 100%;
      margin-top: 18px;

      .head-box {
        width: 100%;
        height: 76px;
        background: url('~@/assets/images/home/preview-head-bg.jpg');
        background-size: 100% 100%;
        position: relative;

        .title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 18px;
          color: #000000;
          line-height: 22px;
          text-align: center;
          position: absolute;
          bottom: 8px;
          left: 0;
          width: 100%;
        }
      }

      .preview-body {
        width: 100%;
        height: 302px;
        background: url('~@/assets/images/home/preview-bg2.jpg');
        background-size: 100% 100%;
        position: relative;

        .attention {
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          top: 12px;
          right: 20px;
          width: 58px;
          height: 24px;
          font-weight: 400;
          font-size: 12px;
          color: #ffffff;
          line-height: 24px;
          background: #04d1b8;
          border-radius: 20px 20px 20px 20px;
          z-index: 999;

          .iconfont {
            margin-right: 4px;
          }
        }

        .intro-box {
          width: 100%;
          padding: 12px;
          position: relative;

          .intro-icon {
            width: 55px;
            height: 14px;
            background: url('~@/assets/images/home/ysjj.png');
            background-size: 100% 100%;
            position: absolute;
            left: 12px;
            top: 12px;
          }

          .intro {
            text-indent: 55px;
            text-align: left;
            line-height: 22px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #6a6b6c;
            line-height: 16px;
          }
        }

        .address {
          height: 48px;
          padding: 0 8px;
          margin: 12px 0;
          background: #f4f5f9;
          border-radius: 8px;
          font-size: 14px;
          color: #1c1f23;
          line-height: 20px;
          display: flex;
          align-items: center;

          .icon-dingwei {
            font-size: 16px;
            color: #6a6b6c;
          }

          .text {
            margin-left: 8px;
          }

          .go-here {
            font-size: 12px;
            color: #6a6b6c;
            width: 60px;
            text-align: center;
            line-height: 14px;
            padding-bottom: 4px;

            .iconfont {
              color: #08bda7;
            }
          }
        }
      }

      .foot-box {
        width: 100%;
        height: 580px;
        background: url('~@/assets/images/home/preview-bg.jpg');
        background-size: 100% 100%;
      }
    }
  }

  .form-head-box {
    border-left: 3px solid #04d1b8;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 20px;
    color: #1c1f23;
    line-height: 23px;
    text-align: left;
    padding-left: 10px;
  }

  .form-body-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 12px 0;
    width: 100%;
    flex-wrap: wrap;

    .card-list-box {
      width: 200px;
      height: 140px;
      margin: 6px;

      .card-div {
        width: 100%;
        height: 115px;
        border: 1px solid #ddd;
        border-radius: 12px;
        padding-left: 8px;
        cursor: pointer;
        overflow: hidden;
        position: relative;

        .img-bg {
          width: 100%;
          height: 100%;
          background: url('~@/assets/images/home/mb-card1.png');
          background-size: 100% 100%;
          border-left: 1px solid #ddd;
        }

        .img-bg1 {
          background: url('~@/assets/images/home/mb-card2.png');
          background-size: 100% 100%;
        }

        .img-bg2 {
          background: url('~@/assets/images/home/mb-card3.png');
          background-size: 100% 100%;
        }

        .img-bg3 {
          background: url('~@/assets/images/home/mb-card4.png');
          background-size: 100% 100%;
        }

        .iconfont {
          right: -4px;
          bottom: -13px;
          position: absolute;
          color: #04d1b8;
          font-size: 34px;
          display: none;
        }
      }

      .card-title {
        font-weight: 400;
        font-size: 14px;
        color: #1c1f23;
        line-height: 16px;
        padding-left: 8px;
        margin-top: 8px;
      }
    }

    .card-list-box:hover,
    .card-list-box.active {
      .card-div {
        border: 1px solid #04d1b8;

        .iconfont {
          display: block;
        }
      }

      .card-title {
        font-weight: 700;
      }
    }
  }

  .up-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;

    .up-div {
      width: 240px;
      height: 170px;
      margin-right: 15px;

      .up-title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 14px;
        color: #1c1f23;
        line-height: 16px;
        text-align: left;
      }

      .up-cont {
        width: 100%;
        height: 145px;
        border-radius: 2px;
        border: 1px dashed #dcdcdc;
        margin-top: 6px;
        position: relative;

        .del-btn {
          width: 100%;
          height: 26px;
          line-height: 26px;
          text-align: center;
          cursor: pointer;
          font-size: 12px;
          position: absolute;
          left: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.2);
          color: #fff;
          display: none;
        }

        ::v-deep {
          .el-upload {
            width: 100%;
            height: 100%;
            border: 0;
          }

          .up-show {
            margin-top: 30px;
          }

          .avatar {
            width: 100%;
            height: 145px;
          }
        }
      }

      .up-cont:hover {
        .del-btn {
          display: block;
        }
      }
    }
  }

  .btn-box {
    margin-top: 64px;
  }
}
</style>
